<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: padding: 0;;
			}
			body{
				background-color: #000;
			}
			#myCanvas{
				display: block;
				margin: 40px auto;
				border: 1px solid #f40;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="600" height="600"></canvas>
		<script type="text/javascript">
			var cx = myCanvas.getContext("2d")
			cx.fillStyle = "#fff"
			var grd=cx.createRadialGradient(100,100,2,100,100,50);
			grd.addColorStop(0,"#fff");
			grd.addColorStop(.1,"#ffffff33");
			grd.addColorStop(1,"#ffffff00");
			cx.fillStyle = grd;
			cx.save()
			cx.translate(400,300)
			cx.fillRect(0,0,200,200)
			cx.restore()
			cx.save()
			cx.translate(100,100)
			cx.fillRect(0,0,200,200)
			cx.restore()
			cx.save()
			cx.translate(400,100)
			cx.fillRect(0,0,200,200)
			cx.restore()
		</script>
	</body>
</html>
